<template>
    <view class="container">
        <!-- 全屏音频背景图片 -->
        <image class="fullscreen-image" 
        :src="currentAudio.img" 
        mode="aspectFill"></image>
        <!-- 上一首按钮 -->
        <image src="../../static/image/icons/last_music.png" class="control-button last-music"
         @click="changeMusic(-1)"></image>
        <!-- 旋转图标 -->
        <view class="playing-icon">
            <image :src="currentAudio.img" class="rotate-icon" mode="aspectFill"></image>
        </view>
        <!-- 下一首按钮 -->
        <image src="../../static/image/icons/next_music.png" class="control-button next-music"
         @click="changeMusic(1)"></image>
        <!-- 音乐播放组件 -->
        <view class="audio-controls">
            <yz-audio ref="audioPlayer">
                <!-- 自定义按钮，若不需要可删除 -->
                <template v-slot:extraCtrls>
                    <uni-icons type="heart-filled" size="25" color="#fff"></uni-icons>
                    <uni-icons type="cloud-download-filled" size="25" color="#fff"></uni-icons>
                    <uni-icons fontFamily="CustomFont" :size="25" color="#fff" 
                    v-html="currentSpeedIcon" @click="playAudioByRate"></uni-icons>
                </template>
            </yz-audio>
        </view>
        
    </view>
</template>
<script>
    //引入自定义的音频播放器组件
    import yzAudio from '../../components/yz-audio/yz-audio.vue';
    //引入音频数据
    import{ audioList } from "../../commons/mock.js";
    export default {
        components: {
            yzAudio//注册自定义组件
        },
        data() {
            return {
                audioList,//音频数据
                currentIndex:0,//当前播放音频的索引
                isDoubleSpeed:false,//追踪当前是否处于二倍速
                oneSpeedIcon:"&#xe9c8",//一倍速图标
                twoSpeedIcon:"&#xe9c9",//二倍速图标
                
                
            }
        },
        computed: {
            currentAudio() {
                //计算属性
                return this.audioList[this.currentIndex];
            },
            currentSpeedIcon(){
                return this.isDoubleSpeed ? this.twoSpeedIcon : this.oneSpeedIcon;
            }
        },
        onLoad(options){  
			//检查options.audioList是否存在且为字符串
			if(options&&typeof options.audioList ==='string'){
				//获取上一个页面传递过来的音乐列表数据
				const audioListStr=options.audioList;
				//赋值给当前的音乐列表
				this.audioList=JSON.parse(decodeURIComponent(audioListStr));
			}
		},
        methods: {
            updateAudioPlayer(){
                //更新音频播放器的内容
                const currentAudio = this.currentAudio;
                this.$refs.audioPlayer.setSrc(currentAudio.src);
                this.$refs.audioPlayer.setPoster(currentAudio.img);
                this.$refs.audioPlayer.setSinger(currentAudio.author);
                this.$refs.audioPlayer.setName(currentAudio.name);
                },
                //翻页播放
                changeMusic(direction) {
                    //根据方向参数切换歌曲，
                    this.currentIndex = (this.currentIndex + direction + this.audioList.length) % 
                    this.audioList.length;
                    this.updateAudioPlayer();
                },
                //倍速播放
                playAudioByRate(){
                    //切换图标状态
                    this.isDoubleSpeed = !this.isDoubleSpeed;
                    //设置音频播放速度
                    this.$refs.audioPlayer.playbackRate(this.isDoubleSpeed ? 2 : 1);
                }
        },
        mounted(){
            //组件挂载后，初始化音频播放器
            this.updateAudioPlayer();
        }
    } 
</script>

<style lang="scss">
.container {
    width:100%;
    height: 100vh;
    position: relative;
    
    .fullscreen-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: blur(8px);//模糊效果
    }
    //翻页面播放按钮
    .control-button {
        position: absolute;
        top:45%;
        width: 80rpx;
        height: 80rpx;
        
        &.last-music {
            left: 10%;//上一首按钮位置
        }
        
        &.next-music{
            right: 10%;
        }
    }
    //旋转图标定位
    .playing-icon{
        position: absolute;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        z-index: 1;
        
        .rotate-icon {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            animation: spin 8s linear infinite;//使用旋转
        }
    }
    //旋转动画
    @keyframes spin {
        from {
            transform: rotate(0deg);//旋转开始角度
        }
        to {
            transform: rotate(360deg);//旋转结束角度
        }
    }
    //播放器
    .audio-controls {
        position: absolute;
        bottom: 10px;
        left: 10px;
        right: 10px;
    }
}
//引入字体图标
    @font-face {
        font-family: CustomFont;
        src: url('/static/iconfont.ttf');
    }
</style>